<template>
  <q-card-section>
    <p class="text-grey-6">所有招聘列表，可通过模糊搜索进行检索。</p>
    <q-table
      :data="table.tableContentData"
      :columns="table.columns"
      :visibleColumns="table.visibleColumns"
      row-key="index"
      :loading="table.loading"
      :pagination.sync="table.initialPagination"
      rows-per-page-label="每页显示"
      flat
      bordered
      wrap-cells
      :dense="$q.screen.lt.md"
      :separator="table.separator"
      :selected-rows-label="selectedRowMessage"
      selection="multiple"
      :selected.sync="table.selected"
    >
      <template v-slot:top>
        <q-space />
        <div class="col">
          <q-btn-group
            flat
            class="float-right"
          >
            <q-btn
              color="primary"
              icon="mdi-delete-sweep"
              label="删除过期信息"
              size="md"
              @click="getSelectedRows"
            />
            <q-btn
              color="primary"
              icon="mdi-table-row-plus-after"
              label="添加招聘"
              size="md"
              @click="gotoAddItem"
            />
          </q-btn-group>
        </div>
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width />
          <q-th
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.label }}
          </q-th>
          <q-th>
            审核
          </q-th>
          <q-th style="min-width:220px">
            操作
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn
              size="xs"
              outline
              round
              color="primary"
              @click="props.expand = !props.expand"
              :icon="props.expand ? 'remove' : 'add'"
            />
          </q-td>
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
          <q-td class="text-center">
            <q-toggle
              v-model="props.row.Status"
              name="Status"
              disable
            />
          </q-td>
          <q-td class="text-center">
            <q-btn-group flat>
              <q-btn
                icon="mdi-delete"
                label="删除"
                size="sm"
                @click="getDeleteRow(props.row)"
              />
              <q-btn
                icon="mdi-table-edit"
                label="编辑"
                size="sm"
                @click="gotoEditRow(props.row)"
              />
            </q-btn-group>
          </q-td>
        </q-tr>
        <q-tr
          v-show="props.expand"
          :props="props"
        >
          <q-td auto-width />
          <q-td colspan="100%">
            <div class="row q-col-gutter-md">
              <div class="col col-md-6">
                <h6 class="q-mb-sm q-mt-lg text-primary">岗位职责</h6>
                <p class="cus-format-textarea">{{ props.row.JobDescription }}</p>
              </div>
              <div class="col col-md-6">
                <h6 class="q-mb-sm q-mt-lg text-primary">职位需求</h6>
                <p class="cus-format-textarea">{{ props.row.JobRequirement }}</p>
              </div>
            </div>
          </q-td>
        </q-tr>
      </template>

      <template v-slot:pagination>
        <q-pagination
          v-model="table.initialPagination.current"
          :max="table.initialPagination.page"
          :boundary-links="true"
          @click="getList(table.initialPagination.current)"
        >
        </q-pagination>
      </template>
      <template v-slot:loading>
        <q-inner-loading
          showing
          color="primary"
        />
      </template>
    </q-table>
    <!-- 对话框-删除确认 -->
    <q-dialog v-model="dialog.delConfirm">
      <q-card>
        <q-card-section class="row items-center">
          <q-avatar
            icon="mdi-alert-circle-outline"
            text-color="primary"
          />
          <span class="q-ml-sm">确定要删除所选记录吗？</span>
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            flat
            label="取消"
            color="primary"
            v-close-popup
          />
          <q-btn
            flat
            label="确定删除"
            color="primary"
            v-close-popup
            @click="deleteRows(deleteID)"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-card-section>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'PageRecruits',
  components: {
  },
  props: {},
  data () {
    return {
      // ---------- 检索
      filterText: '',
      // ---------- 表格
      table: {
        // 默认$Api参数
        defaultCategory: -1,
        defaultPageIndex: 1,
        // 初始化分页
        initialPagination: {
          sortBy: 'desc',
          descending: false,
          page: 1,
          rowsPerPage: this.$store.state.default.rowsPerPage,
          current: 1,
          rowsNumber: 0 //if getting data from a server
        },
        // 分割线模式可选值：horizontal (default)', 'vertical', 'cell', 'none'
        separator: 'horizontal',
        loading: true,
        // 可见列
        visibleColumns: [ 'JobName', 'JobNumber', 'StopDate', 'Qualification'],
        columns: [
          {
            name: 'index',
            required: true,
            label: '序号',
            align: 'center',
            field: 'index'
          },
          { name: 'ID', align: 'center', label: 'ID', field: 'ID', style: 'max-width:50px'},
          { name: 'JobName', align: 'center', label: '职位', field: 'JobName' },
          { name: 'JobNumber', align: 'center', label: '人数', field: 'JobNumber' },
          { name: 'StopDate', align: 'center', label: '失效日期', field: 'StopDate' },
          { name: 'Qualification', align: 'center', label: '学历', field: 'Qualification' },
        ],
        tableContentData: [],
        selected: [],
      },
      // ---------- 对话框
      dialog: {
        delConfirm: false,
      },
      deleteID: []
    }
  },
  methods: {
    // 获取列表
    getList(currentPage) {
      const params = {
        pageIndex:currentPage,
        pageSize:this.table.initialPagination.rowsPerPage,
      }
      this.$api.RecruitParams('', 'get', params).then (result => {
        // console.log(result)
        this.table.tableContentData = result.data
        this.table.initialPagination.rowsNumber = result.count
        this.table.initialPagination.page = Math.ceil(this.table.initialPagination.rowsNumber / this.table.initialPagination.rowsPerPage)
        // 生成序号 & 格式化日期，去掉时间
        this.table.tableContentData.forEach((row, index) => {
          row.index = index + 1
          row.StopDate = this.$utils.initDate(row.StopDate, 0, 10)
        })
        // 关闭加载动画
        this.table.loading = false
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
    },
    // 动态分页(下拉选择每页显示条数)
    requestPagination(props) {
      this.table.initialPagination.rowsPerPage = this.$utils.dynamicPagination(props)
      this.getList(this.form.model, this.table.defaultPageIndex)
    },
    // 显示多条选择行数量信息
    selectedRowMessage() {
      return this.table.selected.length === 0 ? '' : `选择了全部${this.table.tableContentData.length}条记录中的${this.table.selected.length} 条`
    },
    // 获取所有过期ID值数组
    getSelectedRows() {
      this.deleteID = []
      const _nowDate = Date.parse(new Date())
      this.table.tableContentData.map((row) => {
        const _stopDate = new Date (row.StopDate).getTime()
        if ( _stopDate < _nowDate ) {
          this.deleteID.push( row.ID)
        }
      })
      if ( this.deleteID.length > 0 ) {
        this.dialog.delConfirm = true
      } else {
        this.$utils.notify('没有过期记录','red-8')
      }
    },
    // 获取单条删除的row信息
    getDeleteRow(row) {
      this.deleteID = []
      this.deleteID.push(row.ID)
      this.dialog.delConfirm = true
    },
    // 提交服务器并删除本地预存信息
    deleteRows(rowid) {
      // 删除
      const _ids = rowid
      this.$api.RecruitData('', 'delete', _ids).then (result => {
        // console.log(result)
         if ( result === 'success') {
          //  重新请求数据列表
           this.getList(this.table.defaultPageIndex)
         } else if ( result === 'error' ) {
           this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
         }
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })
      this.deleteID = []
      this.table.selected = []
    },
    // btn-编辑
    gotoEditRow(value) {
      this.$router.push('/Recruits/EditRecruit/' + value.ID);
    },
    // btn-添加
    gotoAddItem() {
      this.$router.push('/Recruits/AddRecruit');
    },
    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }
  },
  mounted() {
    this.getList(this.table.defaultPageIndex)
  },
}
</script>
<style>
.q-pagination .q-btn__wrapper:before {
  box-shadow: none;
}
.q-table th,
.q-table td {
  padding: 7px 10px;
  background-color: inherit;
}
/* .q-table td {
  word-wrap: break-word;
} */
</style>